<template>
  <div class="foot-links">
    <div class="item" :key="index" v-for="(item,index) of linksList">
      <div class="title">{{ item.title }}</div>
      <span v-for="(item2,index2) of item.item">{{ item2 }}</span>
    </div>
    <div class="contact">
      <span class="phone">400-100-5678</span>
      <span class="time">8:00-18:00（仅收市话费）</span>
      <div class="nofollow">
        <i class="iconfont icon-xiaoxi1"></i>
        <span>人工客服</span>
      </div>
      <div class="follow">
        <span>关注小米：</span>
        <i class="iconfont icon-weibo"></i>
        <i class="iconfont icon-weixin"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FooterLinks",
  data() {
    return {
      linksList: [
        {
          title: '帮助中心',
          item: [
            '账户管理',
            '购物指南',
            '订单操作',
          ]
        },
        {
          title: '服务支持',
          item: [
            '售后政策',
            '自助服务',
            '相关下载',
          ]
        },
        {
          title: '线下门店',
          item: [
            '小米之家',
            '服务网点',
            '授权体验店',
          ]
        },
        {
          title: '关于小米',
          item: [
            '了解小米',
            '加入小米',
            '投资者关系',
            '企业社会责任',
            '廉洁举报'
          ]
        },
        {
          title: '关注我们',
          item: [
            '新浪微博',
            '官方微信',
            '联系我们',
            '公益基金会',
          ]
        },
        {
          title: '特色服务',
          item: [
            'F 码通道',
            '礼物码',
            '防伪查询',
          ]
        },
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.foot-links{
  width: 100%;
  height: 252px;
  padding: 40px 0;
  display: flex;
  justify-content: space-between;

   .item{
     width: 160px;
     height: 100%;
     display: flex;
     flex-direction: column;
      .title{
        margin-bottom: 26px;
        font-size: 14px;
        color: #424242;
      }
     span{
       font-size: 12px;
       color: #757575;
       margin-bottom: 10px;
       &:hover{
         color: #FF6700;
       }
     }
   }
  .contact{
    width: 252px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .follow{
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        font-size: 12px;
        color: #616161;
      }
      i{
        font-size: 18px;
        margin-right: 5px;
      }
    }
    .phone{
      font-size: 22px;
      line-height: 1;
      color: #ff6700;
      margin-bottom: 5px;
    }
    .time{
      font-size: 12px;
      color: #616161;
      margin-bottom: 5px;
    }
    .nofollow{
      width: 120px;
      height: 30px;
      border: 1px solid #FF6700;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.5s;
      &:hover{
        background: #FF6700;
        transition: all 0.5s;
        i{
          color: white;
        }
        span{
          color: white;
        }
      }
      i{
        font-size: 14px;
        color: #FF6700;
        margin-right: 5px;
      }
      span{
        font-size: 12px;
        color: #FF6700;
      }
    }
    &:before{
      position: absolute;
      content: '';
      left: 0;
      height: 111px;
      width: 1px;
      background: #E0E0E0;
    }
  }
}
</style>